<div class="component-sidebar-header">
    <i data-feather="search"></i>
    <div class="search-form">
        <input type="search" class="form-control" placeholder="Search components">
    </div>
</div><!-- component-sidebar-header -->
<div class="component-sidebar-body">
    <div class="tab-content">
        <div id="tab-layout" class="tab-pane fade @@if (context.tab_layout==='active' ) {active show}">
            <div class="pd-y-20 pd-x-10 component-list">
                <div class="media @@if (context.index==='active') {active}">
                    <a class="media-body mg-l-10" href="@@urlPrefix/index.html">
                        <h6 class="tx-13 mg-b-3">Introduction</h6>
                        <span class="tx-12">介绍</span>
                    </a><!-- media-body -->
                </div><!-- media -->
                <div class="media @@if (context.modals==='active') {active}">
                    <a class="media-body mg-l-10" href="../collections/modals.html">
                        <h6 class="tx-13 mg-b-3">Modals</h6>
                        <span class="tx-12">窗口示例</span>
                    </a><!-- media-body -->
                </div><!-- media -->
            </div><!-- component-list -->
        </div><!-- tab-pane -->
        <div id="tab-grid" class="tab-pane fade @@if (context.tab_grid==='active' ) {active show}">
            <div class="pd-y-20 pd-x-10 component-list">
                <div class="media @@if (context.grid==='active') {active}">
                    <a class="media-body mg-l-10" href="@@urlPrefix/grid.html">
                        <h6 class="tx-13 mg-b-3">Grid System</h6>
                        <span class="tx-12">布局、栅格、后台布局</span>
                    </a><!-- media-body -->
                </div><!-- media -->
            </div><!-- component-list -->
        </div><!-- tab-pane -->
        <div id="tab-util" class="tab-pane fade @@if (context.tab_util==='active' ) {active show}">
            <div class="pd-y-20 pd-x-10 component-list">
                <div class="media @@if (context.util_animation==='active') {active}">
                    <a class="media-body mg-l-10" href="@@urlPrefix/util-animation.html">
                        <h6 class="tx-13 mg-b-3">Animation</h6>
                        <span class="tx-12">动画库</span>
                    </a><!-- media-body -->
                </div><!-- media -->
                <div class="media @@if (context.util_background==='active') {active}">
                    <a class="media-body mg-l-10" href="@@urlPrefix/util-background.html">
                        <h6 class="tx-13 mg-b-3">Background</h6>
                        <span class="tx-12">背景、颜色</span>
                    </a><!-- media-body -->
                </div><!-- media -->
                <div class="media @@if (context.util_border==='active') {active}">
                    <a class="media-body mg-l-10" href="@@urlPrefix/util-border.html">
                        <h6 class="tx-13 mg-b-3">Border</h6>
                        <span class="tx-12">边线</span>
                    </a><!-- media-body -->
                </div><!-- media -->
                <div class="media @@if (context.util_display==='active') {active}">
                    <a class="media-body mg-l-10" href="@@urlPrefix/util-display.html">
                        <h6 class="tx-13 mg-b-3">Display</h6>
                        <span class="tx-12">展示</span>
                    </a><!-- media-body -->
                </div><!-- media -->
                <div class="media @@if (context.util_divider==='active') {active}">
                    <a class="media-body mg-l-10" href="@@urlPrefix/util-divider.html">
                        <h6 class="tx-13 mg-b-3">Divider</h6>
                        <span class="tx-12">分割</span>
                    </a><!-- media-body -->
                </div><!-- media -->
                <div class="media @@if (context.util_flex==='active') {active}">
                    <a class="media-body mg-l-10" href="@@urlPrefix/util-flex.html">
                        <h6 class="tx-13 mg-b-3">Flex</h6>
                        <span class="tx-12">布局</span>
                    </a><!-- media-body -->
                </div><!-- media -->
                <div class="media @@if (context.util_height==='active') {active}">
                    <a class="media-body mg-l-10" href="@@urlPrefix/util-height.html">
                        <h6 class="tx-13 mg-b-3">Height</h6>
                        <span class="tx-12">高度</span>
                    </a><!-- media-body -->
                </div><!-- media -->
                <div class="media @@if (context.util_margin==='active') {active}">
                    <a class="media-body mg-l-10" href="@@urlPrefix/util-margin.html">
                        <h6 class="tx-13 mg-b-3">Margin</h6>
                        <span class="tx-12">外边距</span>
                    </a><!-- media-body -->
                </div><!-- media -->
                <div class="media @@if (context.util_padding==='active') {active}">
                    <a class="media-body mg-l-10" href="@@urlPrefix/util-padding.html">
                        <h6 class="tx-13 mg-b-3">Padding</h6>
                        <span class="tx-12">内边距</span>
                    </a><!-- media-body -->
                </div><!-- media -->
                <div class="media @@if (context.util_position==='active') {active}">
                    <a class="media-body mg-l-10" href="@@urlPrefix/util-position.html">
                        <h6 class="tx-13 mg-b-3">Position</h6>
                        <span class="tx-12">位置</span>
                    </a><!-- media-body -->
                </div><!-- media -->
                <div class="media @@if (context.util_typography==='active') {active}">
                    <a class="media-body mg-l-10" href="@@urlPrefix/util-typography.html">
                        <h6 class="tx-13 mg-b-3">Typography</h6>
                        <span class="tx-12">排版</span>
                    </a><!-- media-body -->
                </div><!-- media -->
                <div class="media @@if (context.util_width==='active') {active}">
                    <a class="media-body mg-l-10" href="@@urlPrefix/util-width.html">
                        <h6 class="tx-13 mg-b-3">Width</h6>
                        <span class="tx-12">宽度</span>
                    </a><!-- media-body -->
                </div><!-- media -->
                <div class="media @@if (context.util_extras==='active') {active}">
                    <a class="media-body mg-l-10" href="@@urlPrefix/util-extras.html">
                        <h6 class="tx-13 mg-b-3">Extras</h6>
                        <span class="tx-12">扩展</span>
                    </a><!-- media-body -->
                </div><!-- media -->
            </div><!-- component-list -->
        </div><!-- tab-pane -->
        <div id="tab-element" class="tab-pane fade @@if (context.tab_element==='active' ) {active show}">
            <div class="pd-y-20 pd-x-10 component-list">
                <div class="media @@if (context.accordion==='active') {active}">
                    <a class="media-body mg-l-10" href="@@urlPrefix/el-accordion.html">
                        <h6 class="tx-13 mg-b-3">Accordion</h6>
                        <span class="tx-12">--</span>
                    </a><!-- media-body -->
                </div><!-- media -->
                <div class="media @@if (context.alerts==='active') {active}">
                    <a class="media-body mg-l-10" href="@@urlPrefix/el-alerts.html">
                        <h6 class="tx-13 mg-b-3">Alerts</h6>
                        <span class="tx-12">警告提示</span>
                    </a><!-- media-body -->
                </div><!-- media -->
                <div class="media @@if (context.avatar==='active') {active}">
                    <a class="media-body mg-l-10" href="@@urlPrefix/el-avatar.html">
                        <h6 class="tx-13 mg-b-3">Avatar</h6>
                        <span class="tx-12">头像</span>
                    </a><!-- media-body -->
                </div><!-- media -->
                <div class="media @@if (context.badge==='active') {active}">
                    <a class="media-body mg-l-10" href="@@urlPrefix/el-badge.html">
                        <h6 class="tx-13 mg-b-3">Badge</h6>
                        <span class="tx-12">徽标数</span>
                    </a><!-- media-body -->
                </div><!-- media -->
                <div class="media @@if (context.el_breadcrumbs==='active') {active}">
                    <a class="media-body mg-l-10" href="@@urlPrefix/el-breadcrumbs.html">
                        <h6 class="tx-13 mg-b-3">Breadcrumbs</h6>
                        <span class="tx-12">面包屑</span>
                    </a><!-- media-body -->
                </div><!-- media -->
                <div class="media @@if (context.buttons==='active') {active}">
                    <a class="media-body mg-l-10" href="@@urlPrefix/el-buttons.html">
                        <h6 class="tx-13 mg-b-3">Buttons</h6>
                        <span class="tx-12">按钮</span>
                    </a><!-- media-body -->
                </div><!-- media -->
                <div class="media @@if (context.buttongroups==='active') {active}">
                    <a class="media-body mg-l-10" href="@@urlPrefix/el-button-groups.html">
                        <h6 class="tx-13 mg-b-3">Button Groups</h6>
                        <span class="tx-12">按钮组</span>
                    </a><!-- media-body -->
                </div><!-- media -->
                <div class="media @@if (context.cards==='active') {active}">
                    <a class="media-body mg-l-10" href="@@urlPrefix/el-cards.html">
                        <h6 class="tx-13 mg-b-3">Cards</h6>
                        <span class="tx-12">卡片</span>
                    </a><!-- media-body -->
                </div><!-- media -->
                <div class="media @@if (context.carousel==='active') {active}">
                    <a class="media-body mg-l-10" href="@@urlPrefix/el-carousel.html">
                        <h6 class="tx-13 mg-b-3">Carousel</h6>
                        <span class="tx-12">走马灯</span>
                    </a><!-- media-body -->
                </div><!-- media -->
                <div class="media @@if (context.collapse==='active') {active}">
                    <a class="media-body mg-l-10" href="@@urlPrefix/el-collapse.html">
                        <h6 class="tx-13 mg-b-3">Collapse</h6>
                        <span class="tx-12">折叠面板</span>
                    </a><!-- media-body -->
                </div><!-- media -->
                <div class="media @@if (context.dropdown==='active') {active}">
                    <a class="media-body mg-l-10" href="@@urlPrefix/el-dropdown.html">
                        <h6 class="tx-13 mg-b-3">Dropdown</h6>
                        <span class="tx-12">下拉菜单</span>
                    </a><!-- media-body -->
                </div><!-- media -->
                <div class="media @@if (context.icons==='active') {active}">
                    <a class="media-body mg-l-10" href="@@urlPrefix/el-icons.html">
                        <h6 class="tx-13 mg-b-3">Icons</h6>
                        <span class="tx-12">图表</span>
                    </a><!-- media-body -->
                </div><!-- media -->
                <div class="media @@if (context.images==='active') {active}">
                    <a class="media-body mg-l-10" href="@@urlPrefix/el-images.html">
                        <h6 class="tx-13 mg-b-3">Images</h6>
                        <span class="tx-12">图片</span>
                    </a><!-- media-body -->
                </div><!-- media -->
                <div class="media @@if (context.listgroup==='active') {active}">
                    <a class="media-body mg-l-10" href="@@urlPrefix/el-list-group.html">
                        <h6 class="tx-13 mg-b-3">List Group</h6>
                        <span class="tx-12">列表</span>
                    </a><!-- media-body -->
                </div><!-- media -->
                <div class="media @@if (context.marker==='active') {active}">
                    <a class="media-body mg-l-10" href="@@urlPrefix/el-marker.html">
                        <h6 class="tx-13 mg-b-3">Marker</h6>
                        <span class="tx-12">标记</span>
                    </a><!-- media-body -->
                </div><!-- media -->
                <div class="media @@if (context.mediaobject==='active') {active}">
                    <a class="media-body mg-l-10" href="@@urlPrefix/el-media-object.html">
                        <h6 class="tx-13 mg-b-3">Media Object</h6>
                        <span class="tx-12">多媒体</span>
                    </a><!-- media-body -->
                </div><!-- media -->
                <div class="media @@if (context.modal==='active') {active}">
                    <a class="media-body mg-l-10" href="@@urlPrefix/el-modal.html">
                        <h6 class="tx-13 mg-b-3">Modal</h6>
                        <span class="tx-12">对话框</span>
                    </a><!-- media-body -->
                </div><!-- media -->
                <div class="media @@if (context.navs==='active') {active}">
                    <a class="media-body mg-l-10" href="@@urlPrefix/el-navs.html">
                        <h6 class="tx-13 mg-b-3">Navs</h6>
                        <span class="tx-12">导航</span>
                    </a><!-- media-body -->
                </div><!-- media -->
                <div class="media @@if (context.navbar==='active') {active}">
                    <a class="media-body mg-l-10" href="@@urlPrefix/el-navbar.html">
                        <h6 class="tx-13 mg-b-3">Navbar</h6>
                        <span class="tx-12">导航条</span>
                    </a><!-- media-body -->
                </div><!-- media -->
                <div class="media @@if (context.offcanvas==='active') {active}">
                    <a class="media-body mg-l-10" href="@@urlPrefix/el-off-canvas.html">
                        <h6 class="tx-13 mg-b-3">Off-Canvas</h6>
                        <span class="tx-12">抽屉，画布闭合</span>
                    </a><!-- media-body -->
                </div><!-- media -->
                <div class="media @@if (context.pagination==='active') {active}">
                    <a class="media-body mg-l-10" href="@@urlPrefix/el-pagination.html">
                        <h6 class="tx-13 mg-b-3">Pagination</h6>
                        <span class="tx-12">分页</span>
                    </a><!-- media-body -->
                </div><!-- media -->
                <div class="media @@if (context.placeholder==='active') {active}">
                    <a class="media-body mg-l-10" href="@@urlPrefix/el-placeholder.html">
                        <h6 class="tx-13 mg-b-3">Placeholder</h6>
                        <span class="tx-12">--</span>
                    </a><!-- media-body -->
                </div><!-- media -->
                <div class="media @@if (context.popovers==='active') {active}">
                    <a class="media-body mg-l-10" href="@@urlPrefix/el-popovers.html">
                        <h6 class="tx-13 mg-b-3">Popovers</h6>
                        <span class="tx-12">起爆卡片</span>
                    </a><!-- media-body -->
                </div><!-- media -->
                <div class="media @@if (context.progress==='active') {active}">
                    <a class="media-body mg-l-10" href="@@urlPrefix/el-progress.html">
                        <h6 class="tx-13 mg-b-3">Progress</h6>
                        <span class="tx-12">进度条</span>
                    </a><!-- media-body -->
                </div><!-- media -->
                <div class="media @@if (context.steps==='active') {active}">
                    <a class="media-body mg-l-10" href="@@urlPrefix/el-steps.html">
                        <h6 class="tx-13 mg-b-3">Steps</h6>
                        <span class="tx-12">步骤</span>
                    </a><!-- media-body -->
                </div><!-- media -->
                <div class="media @@if (context.scrollbar==='active') {active}">
                    <a class="media-body mg-l-10" href="@@urlPrefix/el-scrollbar.html">
                        <h6 class="tx-13 mg-b-3">Scrollbar</h6>
                        <span class="tx-12">滚动条</span>
                    </a><!-- media-body -->
                </div><!-- media -->
                <div class="media @@if (context.scrollspy==='active') {active}">
                    <a class="media-body mg-l-10" href="@@urlPrefix/el-scrollspy.html">
                        <h6 class="tx-13 mg-b-3">Scrollspy</h6>
                        <span class="tx-12">--</span>
                    </a><!-- media-body -->
                </div><!-- media -->
                <div class="media @@if (context.spinners==='active') {active}">
                    <a class="media-body mg-l-10" href="@@urlPrefix/el-spinners.html">
                        <h6 class="tx-13 mg-b-3">Spinners</h6>
                        <span class="tx-12">加载</span>
                    </a><!-- media-body -->
                </div><!-- media -->
                <div class="media @@if (context.el_tab==='active') {active}">
                    <a class="media-body mg-l-10" href="@@urlPrefix/el-tab.html">
                        <h6 class="tx-13 mg-b-3">Tab</h6>
                        <span class="tx-12">标签页</span>
                    </a><!-- media-body -->
                </div><!-- media -->
                <div class="media @@if (context.el_toast==='active') {active}">
                    <a class="media-body mg-l-10" href="@@urlPrefix/el-toast.html">
                        <h6 class="tx-13 mg-b-3">Toast</h6>
                        <span class="tx-12">提示</span>
                    </a><!-- media-body -->
                </div><!-- media -->
                <div class="media @@if (context.el_tooltips==='active') {active}">
                    <a class="media-body mg-l-10" href="@@urlPrefix/el-tooltips.html">
                        <h6 class="tx-13 mg-b-3">Tooltips</h6>
                        <span class="tx-12">文字提示</span>
                    </a><!-- media-body -->
                </div><!-- media -->
                <div class="media @@if (context.el_table_basic==='active') {active}">
                    <a class="media-body mg-l-10" href="@@urlPrefix/el-table-basic.html">
                        <h6 class="tx-13 mg-b-3">Table Basic</h6>
                        <span class="tx-12">基础表格</span>
                    </a><!-- media-body -->
                </div><!-- media -->
                <div class="media @@if (context.el_table_advanced==='active') {active}">
                    <a class="media-body mg-l-10" href="@@urlPrefix/el-table-advanced.html">
                        <h6 class="tx-13 mg-b-3">Table Advanced</h6>
                        <span class="tx-12">高级表格</span>
                    </a><!-- media-body -->
                </div><!-- media -->
            </div><!-- component-list -->
        </div><!-- tab-pane -->
        <div id="tab-form" class="tab-pane fade @@if (context.tab_form==='active' ) {active show}">
            <div class="pd-y-20 pd-x-10 component-list">
                <div class="media @@if (context.form_elements==='active') {active}">
                    <a class="media-body mg-l-10" href="@@urlPrefix/form-elements.html">
                        <h6 class="tx-13 mg-b-3">Form Elements</h6>
                        <span class="tx-12">表单元素</span>
                    </a><!-- media-body -->
                </div><!-- media -->
                <div class="media @@if (context.form_input_group==='active') {active}">
                    <a class="media-body mg-l-10" href="@@urlPrefix/form-input-group.html">
                        <h6 class="tx-13 mg-b-3">Input Group</h6>
                        <span class="tx-12">输入组</span>
                    </a><!-- media-body -->
                </div><!-- media -->
                <div class="media @@if (context.form_input_tags==='active') {active}">
                    <a class="media-body mg-l-10" href="@@urlPrefix/form-input-tags.html">
                        <h6 class="tx-13 mg-b-3">Input Tags</h6>
                        <span class="tx-12">标签</span>
                    </a><!-- media-body -->
                </div><!-- media -->
                <div class="media @@if (context.form_input_masks==='active') {active}">
                    <a class="media-body mg-l-10" href="@@urlPrefix/form-input-masks.html">
                        <h6 class="tx-13 mg-b-3">Input Masks</h6>
                        <span class="tx-12">标记</span>
                    </a><!-- media-body -->
                </div><!-- media -->
                <div class="media @@if (context.form_layouts==='active') {active}">
                    <a class="media-body mg-l-10" href="@@urlPrefix/form-layouts.html">
                        <h6 class="tx-13 mg-b-3">Form Layouts</h6>
                        <span class="tx-12">表单布局</span>
                    </a><!-- media-body -->
                </div><!-- media -->
                <div class="media @@if (context.form_validation==='active') {active}">
                    <a class="media-body mg-l-10" href="@@urlPrefix/form-validation.html">
                        <h6 class="tx-13 mg-b-3">Form Validation</h6>
                        <span class="tx-12">表单验证</span>
                    </a><!-- media-body -->
                </div><!-- media -->
                <div class="media @@if (context.form_wizard==='active') {active}">
                    <a class="media-body mg-l-10" href="@@urlPrefix/form-wizard.html">
                        <h6 class="tx-13 mg-b-3">Form Wizard</h6>
                        <span class="tx-12">--</span>
                    </a><!-- media-body -->
                </div><!-- media -->
                <div class="media @@if (context.form_text_editor==='active') {active}">
                    <a class="media-body mg-l-10" href="@@urlPrefix/form-text-editor.html">
                        <h6 class="tx-13 mg-b-3">Text Editor</h6>
                        <span class="tx-12">--</span>
                    </a><!-- media-body -->
                </div><!-- media -->
                <div class="media @@if (context.form_range_slider==='active') {active}">
                    <a class="media-body mg-l-10" href="@@urlPrefix/form-range-slider.html">
                        <h6 class="tx-13 mg-b-3">Range Slider</h6>
                        <span class="tx-12">--</span>
                    </a><!-- media-body -->
                </div><!-- media -->
                <div class="media @@if (context.form_date_pickers==='active') {active}">
                    <a class="media-body mg-l-10" href="@@urlPrefix/form-date-pickers.html">
                        <h6 class="tx-13 mg-b-3">Date Pickers</h6>
                        <span class="tx-12">日期</span>
                    </a><!-- media-body -->
                </div><!-- media -->
                <div class="media @@if (context.form_select2==='active') {active}">
                    <a class="media-body mg-l-10" href="@@urlPrefix/form-select2.html">
                        <h6 class="tx-13 mg-b-3">Select2</h6>
                        <span class="tx-12">选择框</span>
                    </a><!-- media-body -->
                </div><!-- media -->
                <div class="media @@if (context.form_search==='active') {active}">
                    <a class="media-body mg-l-10" href="@@urlPrefix/form-search.html">
                        <h6 class="tx-13 mg-b-3">Search</h6>
                        <span class="tx-12">搜索框</span>
                    </a><!-- media-body -->
                </div><!-- media -->
            </div><!-- component-list -->
        </div><!-- tab-pane -->
        <div id="tab-chart" class="tab-pane fade @@if (context.tab_chart==='active' ) {active show}">
            <div class="pd-y-20 pd-x-10 component-list">
                <div class="media @@if (context.chart_flot==='active') {active}">
                    <a class="media-body mg-l-10" href="@@urlPrefix/chart-flot.html">
                        <h6 class="tx-13 mg-b-3">Flot</h6>
                        <span class="tx-12">--</span>
                    </a><!-- media-body -->
                </div><!-- media -->
                <div class="media @@if (context.chart_js==='active') {active}">
                    <a class="media-body mg-l-10" href="@@urlPrefix/chart-js.html">
                        <h6 class="tx-13 mg-b-3">ChartJS</h6>
                        <span class="tx-12">图表</span>
                    </a><!-- media-body -->
                </div><!-- media -->
                <div class="media @@if (context.chart_peity==='active') {active}">
                    <a class="media-body mg-l-10" href="@@urlPrefix/chart-peity.html">
                        <h6 class="tx-13 mg-b-3">Peity</h6>
                        <span class="tx-12">--</span>
                    </a><!-- media-body -->
                </div><!-- media -->
                <div class="media @@if (context.chart_sparkline==='active') {active}">
                    <a class="media-body mg-l-10" href="@@urlPrefix/chart-sparkline.html">
                        <h6 class="tx-13 mg-b-3">Sparkline</h6>
                        <span class="tx-12">--</span>
                    </a><!-- media-body -->
                </div><!-- media -->
                <div class="media @@if (context.chart_morris==='active') {active}">
                    <a class="media-body mg-l-10" href="@@urlPrefix/chart-morris.html">
                        <h6 class="tx-13 mg-b-3">Morris</h6>
                        <span class="tx-12">--</span>
                    </a><!-- media-body -->
                </div><!-- media -->
            </div><!-- component-list -->
        </div><!-- tab-pane -->
    </div><!-- tab-content -->
</div><!-- component-sidebar-body -->